<template>
	<div id="container">
	</div>
</template>

<script lang="ts" setup>
import * as THREE from 'three';
// 导入轨道控制器
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { onMounted } from 'vue'
import dat from 'dat.gui'

onMounted(() => {
	// 创建控制对象
	const controlData = {
		rotationSpeed: 0.01, // 旋转速度
		color: '#66ccff',// 颜色
		wireframe: false,// 线框
		visible: true,
		}

	// 创建实例
	const gui = new dat.GUI()
	const f = gui.addFolder('配置')

	f.add(controlData, "rotationSpeed", 0.01, 0.1, 0.01)
	f.addColor(controlData, 'color')
	f.add(controlData, 'wireframe')
	f.add(controlData, 'visible')
	// 添加id属性
	f.domElement.id = 'gui'
	// 
	f.open()

	// 1.创建场景
	const scene = new THREE.Scene();

	// 创建纹理
	// const texture = new THREE.TextureLoader().load("textures/300.jpg");

	// 创建立体纹理
	const cubetexture = new THREE.CubeTextureLoader().setPath('/textures/').load([
		'1.jpg', '2.jpg',
		'3.jpg', '4.jpg',
		'5.jpg', '6.jpg'
	])

	// 设置立体纹理
	scene.background = cubetexture

	// 2.创建一个立方体
	// const geometry = new THREE.BoxGeometry(2, 2, 2);
	// // 3.设置材料(材质)
	// const material = new THREE.MeshBasicMaterial({
	// 	// color: 0xff0000,
	// 	map: texture
	// });

	// 创建一个球体 镜面反射
	const geometry = new THREE.SphereGeometry(1.5)
	// 创建材质
	const material = new THREE.MeshBasicMaterial({
		// color: 0xff0000 
		envMap: cubetexture
	})
	

	// 将材质贴合到立方体上
	const cube = new THREE.Mesh(geometry, material);
	// 设置立方体的位置
	cube.position.set(0, 2, 0)
	// 将立方体添加到场景中
	scene.add(cube);

	// cube.material.transparent = true
	// cube.material.opacity = 0.3
	// cube.material.alphaHash = true

	// 4.创建摄像机
	const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000);
	// 设置摄像机位置
	camera.position.z = 10
	camera.position.y = 10
	camera.lookAt(0,2,0)


	// 5.渲染场景
	const renderer = new THREE.WebGLRenderer();
	// 设置场景大小
	renderer.setSize(window.innerWidth, window.innerHeight);

	// 将 dat.gui添加到页面中
	document.getElementById('container').appendChild(f.domElement)

	// 设置场景颜色
	// renderer.setClearColor(0xcccccc)
	document.getElementById('container').appendChild(renderer.domElement);


	// 增加网格
	const gridHelper = new THREE.GridHelper(10, 10);
	scene.add(gridHelper);


	// 添加轨道控制器
	const controls = new OrbitControls(camera, renderer.domElement)

	// 设置阻尼
	controls.enableDamping = true
	controls.dampingFactor = 0.01
	controls.autoRotate = true
	controls.autoRotateSpeed = 1


	// 添加三维坐标轴
	// const axesHelper = new THREE.AxesHelper(5);
	// axesHelper.position.y = 2
	// scene.add( axesHelper );

	// renderer.render(scene,camera)

	function animate() {
		// requestAnimationFrame 是一个由浏览器提供的方法，用于请求调用一个函数来更新动画，该方法会告诉浏览器在下次重绘之前调用指定的回调函数来更新动画。这个方法接受一个回调函数作为参数，该回调函数会被传入一个DOMHighResTimeStamp参数，表示请求重绘的时间，从而允许开发者创建平滑的动画效果
		requestAnimationFrame(animate);

		cube.rotation.x += controlData.rotationSpeed
		cube.rotation.y += controlData.rotationSpeed
		cube.material.color = new THREE.Color(controlData.color)
		material.wireframe = controlData.wireframe
		material.visible = controlData.visible

		controls.update()

		renderer.render(scene, camera);
	}

	animate();

})

</script>

<style scoped>
/* /deep/#gui {
  position: absolute;
  right: 0;
  width: 300px;
} */

:deep(#gui) {
	position: absolute;
	right: 0;
	width: 300px;
}
</style>